<!--
 * @Description: 添加
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-25 23:02:42
 * @FilePath: /yuxiuproweb/src/views/material/fabric/mods/add.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="1100px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">商品原料</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="品名" prop="name">
              <el-input v-model="form.name" placeholder="请输入品名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售型号" prop="salesModel">
              <el-input
                v-model="form.salesModel"
                placeholder="请输入销售型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售别名" prop="salesAlias">
              <el-input
                v-model="form.salesAlias"
                placeholder="请输入销售别名"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="enableFlag">
              <el-switch
                v-model="form.enableFlag"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否支持定型" prop="design">
              <el-switch
                v-model="form.design"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门幅(米)" prop="width">
              <el-input-number
                style="width: 100%"
                v-model="form.width"
                placeholder="请输入门幅"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单重(千克/米)" prop="weight">
              <el-input-number
                style="width: 100%"
                v-model="form.weight"
                placeholder="请输入单重"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="圈色" prop="circularColor">
              <el-select
                v-model="form.circularColor"
                placeholder="请选择圈色"
                style="width: 100%"
              >
                <el-option
                  v-for="item in CircularColor"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="相关信息" prop="des">
              <el-input v-model="form.des" placeholder="请输入相关信息" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in TYPE"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接高料" prop="heighteningFabricId">
              <el-select
                v-model="form.heighteningFabricId"
                placeholder="请选择"
                style="width: 100%"
                clearable
                filterable
              >
                <el-option
                  v-for="item in fabricList"
                  :key="item.mdFabricId"
                  :label="item.name"
                  :value="item.mdFabricId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.heighteningFabricId">
            <el-form-item label="接高料方向" prop="heighteningFabricFixed">
              <el-select
                v-model="form.heighteningFabricFixed"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="定宽" value="0" />
                <el-option label="定高" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="定高定宽" prop="widthOrHeight">
              <el-select
                v-model="form.widthOrHeight"
                placeholder="请选择定高定宽"
                style="width: 100%"
              >
                <el-option label="定高" :value="0" />
                <el-option label="定宽" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="定高买宽方向花距(米)"
              prop="heightEmbroiderySpacing"
            >
              <el-input-number
                style="width: 100%"
                v-model="form.heightEmbroiderySpacing"
                placeholder="请输入定高买宽方向花距"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="定宽买高方向花距(米)"
              prop="widthEmbroiderySpacing"
            >
              <el-input-number
                style="width: 100%"
                v-model="form.widthEmbroiderySpacing"
                placeholder="请输入定宽买高方向花距"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><el-form-item label="对应实物高度" prop="physicalHeight">
              <el-input-number
                style="width: 100%"
                v-model="form.physicalHeight"
                placeholder="请输入对应实物高度"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="定高花距褶子" prop="heightPleatNumber">
              <el-input-number
                style="width: 100%"
                v-model="form.heightPleatNumber"
                placeholder="请输入定高花距褶子"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="定宽花距褶子" prop="widthPleatNumber">
              <el-input-number
                style="width: 100%"
                v-model="form.widthPleatNumber"
                placeholder="请输入定宽花距褶子"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="加工方式" prop="processingMethodIds">
              <el-select
                v-model="form.processingMethodIds"
                multiple
                placeholder="请选择"
                style="width: 100%"
                clearable
                filterable
              >
                <el-option
                  v-for="item in methodList"
                  :key="item.processingMethodId"
                  :label="item.processingMethodName"
                  :value="item.processingMethodId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="supplier">
              <el-select
                v-model="form.supplier"
                placeholder="请选择供应商名称"
                style="width: 100%"
                filterable
                remote
                reserve-keyword
                :remote-method="getVendorList"
              >
                <el-option
                  v-for="item in vendorList"
                  :key="item.vendorId"
                  :label="item.vendorName"
                  :value="item.vendorName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="同步产品原料" prop="design">
              <el-switch
                v-model="form.isSynchronization"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="sku图" prop="skuImg">
              <image-upload v-model="form.skuImg" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平铺图" prop="tileImg">
              <image-upload v-model="form.tileImg" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">库存相关信息</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购方式 " prop="procurementMethod">
              <el-radio-group v-model="form.procurementMethod">
                <el-radio label="0">外采购</el-radio>
                <el-radio label="1">委外</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库方式" prop="deliveryMode">
              <el-radio-group v-model="form.deliveryMode">
                <el-radio label="0">PAD出库</el-radio>
                <el-radio label="1">领料出库</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否备货" prop="stock">
              <el-radio-group v-model="form.stock">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="最小库存(米)" prop="minimumBalance">
              <el-input-number
                v-model="form.minimumBalance"
                placeholder="请输入最小库存"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="默认仓库" prop="defaultWarehouse">
              <el-select
                v-model="form.defaultWarehouse"
                placeholder="请选择仓库"
                style="width: 100%"
              >
                <el-option
                  v-for="item in DefaultWarehouse"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">价格相关数据</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="价格模型" prop="priceModel">
              <el-select
                v-model="form.priceModel"
                placeholder="请选择价格模型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in PriceModel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-descriptions
              class="open-right"
              direction="vertical"
              :column="2"
              border
            >
              <el-descriptions-item label="价格">单价</el-descriptions-item>
              <el-descriptions-item label="出厂价">
                <el-form-item label-width="0" prop="factoryPrice">
                  <el-input-number
                    v-model="form.factoryPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="16">
            <el-descriptions
              class="ml20 open-right"
              direction="vertical"
              :column="3"
              border
            >
              <el-descriptions-item label="价格"
                >零裁<span style="color: red"
                  >(默认价格)</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="经销价">
                <el-form-item label-width="0" prop="wholesalePrice1">
                  <el-input-number
                    v-model="form.wholesalePrice1"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                <el-form-item label-width="0" prop="retailPrice1">
                  <el-input-number
                    v-model="form.retailPrice1"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="价格">整卷</el-descriptions-item>
              <el-descriptions-item label="经销价">
                <el-form-item label-width="0" prop="wholesalePrice2">
                  <el-input-number
                    v-model="form.wholesalePrice2"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                <el-form-item label-width="0" prop="retailPrice2">
                  <el-input-number
                    v-model="form.retailPrice2"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  listFabric,
  getFabric,
  addFabric,
  updateFabric,
} from "@/api/material/fabric";
import { listVendor } from "@/api/mes/md/vendor";
import { listMethod } from "@/api/process/way";
import {
  PriceModel,
  DefaultWarehouse,
  CircularColor,
  TYPE,
} from "../configure";
export default {
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      PriceModel,
      DefaultWarehouse,
      CircularColor,
      TYPE,
      methodList: [],
      fabricList: [],
      vendorList: [],
      // 表单参数
      form: {
        mdFabricId: null,
        name: null,
        salesModel: null,
        salesAlias: null,
        enableFlag: "N",
        design: "N",
        width: 2.8,
        weight: null,
        circularColor: "3",
        isSynchronization: "0",
        des: null,
        type: null,
        heighteningFabricId: null,
        skuImg: null,
        tileImg: null,
        widthOrHeight: 0,
        heightEmbroiderySpacing: null,
        widthEmbroiderySpacing: null,
        physicalHeight: null,
        heightPleatNumber: null,
        widthPleatNumber: null,
        procurementMethod: "0",
        deliveryMode: "0",
        stock: "Y",
        minimumBalance: null,
        defaultWarehouse: "5",
        priceModel: "0",
        factoryPrice: null,
        wholesalePrice1: null,
        retailPrice1: null,
        wholesalePrice2: null,
        retailPrice2: null,
        processingMethodIds: null,
        heighteningFabricFixed: null,
        supplier: null,
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "品名不能为空", trigger: "blur" }],
        widthOrHeight: [
          {
            required: true,
            message: "定高定宽",
            trigger: "blur",
          },
        ],
        heightEmbroiderySpacing: [
          {
            required: true,
            message: "定高买宽方向花距(米 不能为空",
            trigger: "blur",
          },
        ],
        widthEmbroiderySpacing: [
          {
            required: true,
            message: "定宽买高方向花距(米 不能为空",
            trigger: "blur",
          },
        ],
        physicalHeight: [
          {
            required: true,
            message: "对应实物高度 不能为空",
            trigger: "blur",
          },
        ],
        heightPleatNumber: [
          {
            required: true,
            message: "定高花距褶子不能为空",
            trigger: "blur",
          },
        ],
        widthPleatNumber: [
          {
            required: true,
            message: "定宽花距褶子不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加面料维护",
        edit: "修改面料维护",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    } else {
      this.getVendorList();
    }
    this.getMethodList();
    this.getFabricList();
  },
  methods: {
    getVendorList(vendorName = "") {
      listVendor({
        pageNum: 1,
        pageSize: 100,
        vendorName,
      }).then(({ rows }) => {
        this.vendorList = rows;
      });
    },
    /** 获取接高料 */
    getFabricList() {
      listFabric({
        pageNum: 1,
        pageSize: 500,
      }).then(({ rows }) => {
        this.fabricList = rows;
      });
    },
    /** 获取加工方式 */
    getMethodList() {
      listMethod({
        pageNum: 1,
        pageSize: 500,
      }).then(({ rows }) => {
        this.methodList = rows;
      });
    },
    /** 修改按钮操作 */
    handleUpdate() {
      const mdFabricId = this.data.mdFabricId;
      getFabric(mdFabricId).then((response) => {
        this.form = response.data;
        this.form.processingMethodIds = (
          this.form.processingMethodIds
            ? this.form.processingMethodIds?.split(",")
            : []
        )?.map((e) => +e);
        this.getVendorList(this.form.supplier);
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.processingMethodIds =
            this.form.processingMethodIds?.join() || "";
          if (this.form.mdFabricId != null) {
            updateFabric(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addFabric(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
